
<template>
  <div id="app">
  <!-- 回车按键松开触发的事件 -->
    <a-input placeholder="请输入任务" class="my_ipt" v-model='val' @keyup.enter='addItem' />
    <a-button type="primary"  @click="addItem">添加事项</a-button>
    
    <a-list  class="dt_list" bordered :data-source='filterList'>
      <a-list-item slot="renderItem" slot-scope="item" >
        <!-- 复选框 -->
        <a-checkbox :checked='item.done' v-model='item.done' @change="changeCheckbox(item.id,$event)"></a-checkbox>{{item.info}}
        <!-- 删除链接 -->
        <a slot="actions" @click="removeItem(item.id)" >删除</a>
      </a-list-item>
    
      <!-- footer区域 -->
      <div slot="footer" class="footer">
        <!-- 未完成的任务个数 -->
        <span><strong> {{uncomplate}}</strong>条剩余</span>
        <!-- 操作按钮 -->
        <a-button-group>
          <a-button :type="flage=='all' ? 'primary' : '' " @click="changeFlage('all')" >全部</a-button>
          <a-button :type="flage=='undone' ? 'primary' : '' " @click="changeFlage('undone')">未完成</a-button>
          <a-button  :type="flage=='done' ? 'primary' : '' " @click="changeFlage('done')">已完成</a-button>
        </a-button-group>
        <!-- 把已经完成的任务清空 -->
        <a @click='clearDone'>清除已完成</a>
      </div>
    </a-list>
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default{

  data(){
    return{}
  },


computed:{
  val:{
get(){
return this.$store.state.val
},
set(value){
//同步val值
					this.$store.commit("changVal",value);
}
  },
...mapState(['list',"flage"]),
...mapGetters(['uncomplate','filterList'])
},
methods:{
 //添加一项数据
			addItem(){
				this.$store.commit("addItem");
			},
    //同步checkbox的值
			changeCheckbox(id,e){
				console.log(e.target.checked);
				this.$store.commit("changeCheckbox",{ids:id,checked:e.target.checked})
			},
     removeItem(id){
this.$store.commit('removeItem',id)
     } ,
     changeFlage(val){
this.$store.commit('changeFlage',val)
     },
     clearDone(){
       this.$store.commit('clearDone')
     }
     
},
created(){
  //一打开页面就有数据,用dispatch触发下
this.$store.dispatch('asyncInit')
},
}
</script>
<style scoped>
#app {
  padding: 10px;

}

.my_ipt {
  width: 500px;
  margin-right: 10px;
}

.dt_list {
  width: 500px;
  /* margin-top: 10px; */
  margin:20px auto;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>


